<template>
    <el-dialog
        title="设置总店"
        :visible.sync="showValue"
        append-to-body
        :close-on-click-modal="false"
        width="550px"
        top="20px"
        :before-close="clearData"
    >
        <div class="wrap">
            <el-form
                ref="form"
                :model="form"
                :rules="rules"
                size="small"
                label-width="120px"
            >
                <el-form-item label="总店名称:" prop="companyName">
                    <el-input
                        type="text"
                        v-model="form.companyName"
                        class="items"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系人电话:" prop="telPhone">
                    <el-input
                        type="text"
                        v-model="form.telPhone"
                        class="items"
                    ></el-input>
                </el-form-item>
                <el-form-item label="联系人:" prop="contact">
                    <el-input
                        type="text"
                        v-model="form.contact"
                        class="items"
                    ></el-input>
                </el-form-item>
                <el-form-item
                    label="代理商："
                    v-if="roleId === 1"
                    prop="agentId"
                >
                    <el-select
                        class="items"
                        v-model="form.agentId"
                        filterable
                        clearable
                        placeholder="请选择"
                        size="small"
                    >
                        <el-option
                            v-for="item in agentList"
                            :key="item.id"
                            :label="item.agentName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态:" prop="status" v-if="roleId === 1">
                    <el-radio-group v-model="form.status">
                        <el-radio :label="1">停用</el-radio>
                        <el-radio :label="0">启用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="所在省:" prop="provincialLevelCode">
                    <el-select
                        v-model="form.provincialLevelCode"
                        class="items"
                        filterable
                        @change="
                            form.cityLevelCode = ''
                            form.countyLevelCode = ''
                            getCity()
                        "
                        placeholder="请选择"
                    >
                        <el-option label="省份" value=""></el-option>
                        <el-option
                            v-for="item in provinceList"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在市:" prop="cityLevelCode">
                    <el-select
                        v-model="form.cityLevelCode"
                        class="items"
                        @change="form.countyLevelCode='';getCounty()"
                        filterable
                        placeholder="请选择"
                    >
                        <el-option label="城市" value=""></el-option>
                        <el-option
                            v-for="item in cityList"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="所在区/县:" prop="countyLevelCode">
                    <el-select
                        filterable
                        v-model="form.countyLevelCode"
                        class="items"
                        placeholder="请选择"
                    >
                        <el-option label="区/县" value=""></el-option>
                        <el-option
                            v-for="item in countyList"
                            :key="item.regioncode"
                            :label="item.regionname"
                            :value="item.regioncode"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="详细地址:" prop="address">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                        placeholder="请输入地址"
                        v-model="form.address"
                    >
                    </el-input>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer">
            <el-button size="small" @click="clearData">取 消</el-button>
            <el-button
                type="primary"
                size="small"
                :loading="loading"
                @click="save"
                >确 定</el-button
            >
        </span>
    </el-dialog>
</template>

<script>
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    data () {
        var validatePhone = (rule, value, callback) => {
            var reg = /^1[3456789]\d{9}$/
            if (value === '') {
                callback(new Error('不能为空'))
            } else {
                if (!reg.test(value)) {
                    callback(new Error('请输入规范的手机号'))
                }
                callback()
            }
        }
        return {
            provinceList: [], // 省
            cityList: [], // 市
            countyList: [], // 区
            loading: false,
            showValue: false,
            agentList: [],
            form: {
                companyId: '',
                companyName: '',
                telPhone: '',
                contact: '',
                provincialLevelCode: '',
                cityLevelCode: '',
                countyLevelCode: '',
                address: '',
                status: 0
            },
            rules: {
                companyName: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                telPhone: [
                    { required: true, validator: validatePhone, trigger: 'blur' }
                ],
                contact: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                provincialLevelCode: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                cityLevelCode: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                countyLevelCode: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ]
            },
            agentAllList: []
        }
    },
    computed: {
        roleId () {
            return this.$store.state.roleId
        }
    },
    watch: {
        value (val) {
            this.showValue = val
        },
        showValue (val) {
            if (val) {
                if (this.currRow.companyId) {
                    this.getDetail()
                } else {
                    this.form = {
                        companyId: '',
                        companyName: '',
                        telPhone: '',
                        contact: '',
                        provincialLevelCode: '',
                        cityLevelCode: '',
                        countyLevelCode: '',
                        address: '',
                        status: this.roleId === 1 ? 0 : 1
                    }
                }
            }
            this.$emit('update:value', val)
        }
    },
    created () {
        this.getProvice()
        this.getAllAgent()
    },
    methods: {
        async getDetail () {
            let res = await this.$http.get(this.$store.state.IP + '/headCompany/getHeadCompanyDetail?companyId=' + this.currRow.companyId, {
                data: {}
            })
            let response = res.data
            if (response.ret === '0') {
                this.form = response.data
                this.getCity()
                this.getCounty()
            }
        },
        async getAllAgent () {
            let res = await this.$http.get(this.$store.state.IP + '/systemUserManage/getAgents', {
                data: {}
            })
            let response = res.data
            if (response.ret === '0') {
                console.log(res)
                this.agentList = response.res
            }
        },
        // 获取 省级列表
        async getProvice () {
            this.form.cityLevelCode = ''
            this.form.countyLevelCode = ''
            const res = await this.$http.get(this.$store.state.IP + '/region/provincialLevel', {})
            let response = res.body
            if (response.ret === '0') {
                this.provinceList = response.data
            }
        },
        // 获取 市
        async getCity () {
            if (!this.form.provincialLevelCode) {
                this.cityList = []
                this.countyList = []
                return
            }
            const res = await this.$http.post(this.$store.state.IP + '/region/cityLevel', {
                data: {
                    preCode: this.form.provincialLevelCode
                }
            })
            let response = res.body
            if (response.ret === '0') {
                this.cityList = response.data
            }
        },
        // 获取 省级列表
        async getCounty () {
            if (!this.form.cityLevelCode) {
                this.countyList = []
                return
            }
            const res = await this.$http.post(this.$store.state.IP + '/region/countyLevel', {
                data: {
                    preCode: this.form.cityLevelCode
                }
            })
            let response = res.body
            if (response.ret === '0') {
                this.countyList = response.data
            }
        },
        // 清空数据
        clearData () {
            this.$refs.form.resetFields()
            this.form.agentList = []
            this.loading = false
            this.showValue = false
        },
        // 保存表单
        save () {
            this.$refs.form.validate(async (valid) => {
                if (valid) {
                    this.loading = true
                    let res = await this.$http.post(this.$store.state.IP + '/headCompany/save', {
                        ...this.form
                    })
                    let response = res.data
                    if (response.ret === '0') {
                        this.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        this.clearData()
                        this.$emit('getList')
                    } else {
                        this.loading = false
                    }
                }
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
.items
    width: 220px

.checkboxWrap
    height: 300px
    overflow: auto

.checkItem
    width: 180px
    display: flex
    align-items: center
    margin-left: 0 !important
</style>